<!-- @module taskMonitorList -->
<!-- @author: YunTao.Li -->
<!-- @description: 审批历史列表 -->
<!-- @since: 2019-12-20 10:31:28 -->
<template>
  <el-dialog title="审批历史" :visible.sync="dialogFormVisible" width="80%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @close="closeDialog">
    <!-- table begin-->
    <div class="div-table">
      <fieldset class="fieldset" style="margin-top:15px;">
        <legend class="legend-font" v-text="text_grid" />
        <el-table v-loading="listLoading" :data="approvalHistoryList" border fit highlight-current-row style="width: 100%" max-height="350" size="mini">
          <!-- <el-table-column type="index" width="55" label="序号" /> -->
          <!--任务标识-->
          <!-- <el-table-column align="center" label="任务标识" width="80px">
            <template slot-scope="scope">
              <span>{{ scope.row.taskId }}</span>
            </template>
          </el-table-column> -->
          <!--流程标题-->
          <!-- <el-table-column align="center" label="流程标题" width="200px">
            <template slot-scope="scope">
              <span>{{ scope.row.taskTitle }}</span>
            </template>
          </el-table-column> -->
          <!--活动名称-->
          <el-table-column align="center" label="活动名称">
            <template slot-scope="scope">
              <span>{{ scope.row.activityName }}</span>
            </template>
          </el-table-column>
          <!--操作人-->
          <el-table-column align="center" label="操作人">
            <template slot-scope="scope">
              <span>{{ scope.row.activityUserName }}</span>
            </template>
          </el-table-column>
          <!--开始时间-->
          <el-table-column align="center" label="开始时间" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.startDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <!--结束时间-->
          <el-table-column align="center" label="结束时间" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.endDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <!--审批意见-->
          <el-table-column align="center" label="审批意见">
            <template slot-scope="scope">
              <span>{{ scope.row.approvalOpinion }}</span>
            </template>
          </el-table-column>
          <!--操作-->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <span>{{ scope.row.opcodeName }}</span>
            </template>
          </el-table-column>
        </el-table>
      </fieldset>
    </div>
    <!-- table end -->
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button size="mini" @click="onCancel">关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { getTaskMonitorList } from '@/api/attendance/approval-service'

export default {
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      listLoading: true,
      text_grid: '审批记录',
      approvalHistoryList: [],
      formLabelWidth: '120px'
    }
  },
  methods: {
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) { // 隐藏
        this.dialogFormVisible = false
      } else { // 显示
        this.dialogFormVisible = true
        const processInstID = data.insCode
        console.log('taskMonitorList.vue-toggele-else-processInstID:' + processInstID)
        this.onLoadHistorys(processInstID)
      }
    },
    onLoadHistorys(processInstID) {
      getTaskMonitorList(processInstID, {}).then(response => {
        this.listLoading = true
        this.approvalHistoryList = response.data

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      })
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
    },
    closeDialog() {

    },
    resetFormData() {
      this.approvalHistoryList = []
    }
  }
}
</script>

<style>
/* .el-date-picker{
  width: 80%
} */
</style>
